<template>
  <div class="vc-page msg-notice-detail-page">
    <div>
      <div class="notice-detail-top">
        <div class="title text-ellipsis">{{ entity.title }}</div>
        <div class="info">
          <div v-if="entity.releaseTime">发布时间：{{ GLOBAL.formatter.formatDateTime(entity.releaseTime, 'YYYY-MM-DD HH:mm') }}&emsp;&emsp;</div>
          <div v-if="entity.releaseNickname">发布人：{{ entity.releaseNickname }}</div>
          <el-button type="text" size="small" class="btn-text-only" @click="$router.push($route.meta.parent)">查看全部通知>></el-button>
        </div>
      </div>

      <div class="notice-detail-content">{{ entity.content }}</div>

      <div v-if="entity.attmts.length" class="notice-detail-file">
        <span>附件下载</span>
        <download-file ref="filesData" :fileData="entity.attmts"/>
      </div>
    </div>
  </div>
</template>

<script>
import qs from 'qs';
import DownloadFile from "./downloadFile";

export default {
  name: 'noticeDetail',
  components: { DownloadFile },
  data() {
    return {
      entity: {
        title: '',
        releaseTime: '',
        releaseNickname: '',
        content: '',
        attmts: []
      }
    }
  },
  created() {
    this.getDetail();
  },
  methods: {
    /**
     * 获取详情数据
     */
    getDetail() {
      this.$api.findNoticeInfoById({
        data: qs.stringify({
          id: this.$route.params.id
        })
      }).then(res => {
        if (!res.success || !res.data) {
          return;
        }
        this.entity = res.data;
      });
    }
  }
}
</script>

<style lang="less" scoped>
.msg-notice-detail-page {
  height: calc(100% - 30px);
  & > div {
    width: calc(100% - 56px);
    margin-bottom: 15px;
    padding: 21px 28px;
    background: #fff;
    .notice-detail-top {
      height: 64px;
      border-bottom: 1px solid #D8D8D8;
      .title {
        width: 100%;
        height: 24px;
        line-height: 24px;
        color: #545454;
        font-size: 18px;
        font-weight: 600;
        text-align: left;
      }
      .info {
        display: flex;
        height: 16px;
        line-height: 16px;
        margin-top: 10px;
        color: #A2A2A2;
        font-size: 12px;
        .btn-text-only {
          margin-left: auto;
        }
      }
    }
    .notice-detail-content {
      margin-top: 14px;
      font-size: 14px;
      line-height: 34px;
      color: #545454;
      text-align: left;
      white-space: pre-wrap;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    }
    .notice-detail-file {
      width: 100%;
      margin-top: 100px;
      display: flex;
      color: #818181;
      & > span {
        width: 70px;
        height: 40px;
        line-height: 40px;
        text-align: left;
      }
      & > div {
        width: calc(100% - 100px);
      }
    }
  }
}
</style>